<template>
  <div v-show="show">
    <!-- placeholder固定在底部时，是否在标签位置生成一个等高的占位元素 -->
    <van-tabbar v-model="active" :placeholder="true">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" to="/stock"
        >股票</van-tabbar-item
      >
      <van-tabbar-item icon="medal-o" to="/fund">基金</van-tabbar-item>
      <van-tabbar-item icon="balance-o" to="/me">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      show: true,
    };
  },
  watch: {
    // 监听watch函数，第一次初始化也会立即执行
    $route: {
      handler(newRoute, oldRoute) {
        let index = ["/", "/stock", "/fund", "/me"].indexOf(newRoute.path);
        if (index !== -1) {
          this.show = true;
          this.active = index;
          console.log(this.active)
        } else {
          this.show = false;
        }
        console.log(newRoute);
      },
      // 配置立即执行属性
      immediate: true,
    },
  },
};
</script>
